<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-10-10 10:54:14
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-10-10 13:41:04
 * @FilePath: \app\src\views\el\css\declareColor\select.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="select-box">
    <el-select ref="sel" v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-color-picker v-model="color" show-alpha></el-color-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      color: "#ffffff",
    };
  },
  watch: {
    color: {
      handler(val) {
        this.$nextTick(() => {
          this.$refs.sel.$children[1].$el.style.setProperty("--bgColor", val);
        });
      },
      immediate: true,
    },
  },
  mounted() {
    const poperEl = this.$refs.sel.$children[1].$el;
    poperEl.setAttribute(this.$options._scopeId, ""); // 添加作用域id
  },
};
</script>

<style lang="less" scoped>
.select-box {
  display: flex;
  align-items: center;
}
.el-select-dropdown {
  background-color: var(--bgColor);
  /deep/.popper__arrow::after {
    border-bottom-color: var(--bgColor);
    top: 0;
  }
}
</style>